<template>
	<view class="operation-footer">
		
		<!-- <view class="operation-tel opa-btn" @click="telClick">
			<image src="../../static/img/tel.png" mode="aspectFill" class="opa-tel opa-ico"></image>
			<view class="opa-txt red">
				电话
			</view>
		</view> -->
		<customer class="operation-tel opa-btn"></customer>
		<view class="operation-tel opa-btn" @click="collectClick">
			<image :src="collected ? '../../static/img/heart_active.png' : '../../static/img/heart.png' " mode="aspectFill" class="opa-heart opa-ico"></image>
			<view class="opa-txt" :class="{'red':collected}">
				收藏
			</view>
		</view>
		<view class="operation-join" @click="join">
			加入购物车
		</view>
		<view class="operation-buy" @click="buy">
			立即购买
		</view>
	</view>
</template>

<script>
	import customer from "@/components/customer/customer.vue"
	export default {
		components: {
			customer
		},
		props: ['collected'],
		data() {
			return {
				modalVisable: false
			};
		},
		methods: {
			telClick() {
				this.$emit('telClick')
			},
			join() {
				this.$emit('join')
			},
			buy() {
				this.$emit('buy')
			},
			collectClick() {
				this.$emit('collectClick')
			}
		}
	}
</script>

<style>
	
.operation-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 750upx;
	z-index: 88;
}

.opa-txt {
	color: #808080;
}

</style>
